<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form>
      <input
        type="file"
        name="avatar"
        accept=".md,image/*"
        placeholder="请选择头像"
      />
      <button>上传文件</button>
      <img src="" alt="" class="avatar">
    </form>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    //获取表单元素
  const form = document.querySelector('form')
  const btn = document.querySelector('button')
  const img = document.querySelector('.avatar')
  form.addEventListener('submit' ,function(e){
    e.preventDefault()
    const data = new FormData(this)
    axios({
      url :'http://ajax-api.itheima.net/api/file',
      method : 'POST',
      data
    }).then(({data : res}) =>{
      const data = res.data.url
      img.src = data
    })
  })
  </script>
</html>
